<template>
	<el-card class="box-card">
		<el-table
			ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 100%"
			stripe
			:default-sort="{ prop: 'order', order: 'descending' }"
		>
			<el-table-column label="序号" type="index" width="50"> </el-table-column>
			<el-table-column prop="title" label="标题" align="center"> </el-table-column>
			<el-table-column label="回复内容" align="center">
				<template slot-scope="scope">
					<el-tag size="medium" class="tag_label" effect="dark">
						{{ scope.row.content }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="状态" width="100" show-overflow-tooltip align="center">
				<template slot-scope="scope">
					<el-tag size="medium" class="tag_label" effect="dark" :type="scope.row.state ? 'success' : 'info'">
						{{ scope.row.state | filterState }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="头像" show-overflow-tooltip width="100" align="center">
				<template slot-scope="scope">
					<div class="staff">
						<el-avatar :src="scope.row.photo" size="medium"></el-avatar>
						<span>{{ scope.row.nickname }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="回复时间" show-overflow-tooltip width="160" align="center">
				<template slot-scope="scope"
					><span class="time">{{ scope.row.createtime | filterCreatetime }}</span></template
				>
			</el-table-column>
			<el-table-column prop="order" label="排序" width="50" show-overflow-tooltip align="center"> </el-table-column>
			<el-table-column prop="address" label="操作" show-overflow-tooltip align="center">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" class="btn" @click="look(scope.row.id)" plain>查看</el-button>
					<el-button type="danger" size="mini" class="btn" @click="del(scope.row.id)" plain>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script>
export default {
	props: ['tableData'],
	name: 'questions_list',
	data() {
		return {};
	},
	methods: {
		async del(id) {
            await this.$confirm('确定删除该数据?', '提示', { type: 'warning' });
			this.$emit('del', id);
		},
		look(id) {
			this.$emit('look', id);
		},
	},
};
</script>

<style >
.box-card {
	padding: 20px;
}

.tag_label {
	border-radius: 14px;
}
.cell{
/* 强制一行显示*/
 white-space: nowrap !important;
 /* 溢出隐藏 */
 overflow: hidden !important;
/* 溢出部分变成... */
text-overflow: ellipsis !important;
}
</style>
